<template>
  <view class="out">
    <checkbox-group @change="itemChange">
      <view class="item" v-for="(it,idx) in goods" :key="it.id">
        <checkbox :value="''+it.id" :checked="it.checked"></checkbox>
        <text class="title">{{it.name}}</text>
        <text class="price">{{it.price}}元</text>
        <text class="del" @click="remove(idx)">删除</text>
      </view>
    </checkbox-group>

    <view class="card">
      <view>选中{{totalNumber}}个，总价：{{totalPrice}}元</view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  const goods = ref([
    { id: 11, name: '小米', price: 4999, checked: false },
    { id: 22, name: '华为', price: 6899, checked: false },
    { id: 33, name: 'oppo', price: 2899, checked: false },
    { id: 44, name: '苹果', price: 9888, checked: false }
  ])
  const selectGroup = ref([])

  function remove(idx) {
    goods.value.splice(idx, 1)
  }

  function itemChange(e) {
    selectGroup.value = e.detail.value
    goods.value.forEach(item => {
      item.checked = selectGroup.value.includes(item.id.toString())
    })
  }
  const totalNumber = computed(() => selectGroup.value.length)
  const totalPrice = computed(() => goods.value.filter(item => item.checked).reduce((prev, curr) => prev + curr.price,
    0))
</script>

<style lang="scss">
  .out {
    padding: 10px;

    .item {
      padding: 10px 0;

      .price {
        margin-left: 30px;
      }

      .del {
        color: #c00;
        margin-left: 30px;
      }
    }

    .card {
      margin-top: 30px;
      border-top: 1px solid #eee;
      padding: 10px;
    }
  }
</style>